<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光山县旅游产业监控中心</title>
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <style>
        table{
            width: 100%;
            line-height: 45px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="box">
    <!--头部-->
    <div class="title-box">
        <div class="title-img">
            <h3>光山县旅游产业监控中心</h3>
        </div>
        <ul class="link-box">
            <li><a href="index.html">人流热力图</a></li>
            <li class="active"><a href="chanye_jq.html">行业运行监测</a></li>
            <li><a href="industryDevelopment.html">行业发展监测</a></li>
            <li><a href="video.html">第三方数据</a></li>
        </ul>
        <div class="title-left">
            <span>光山县</span>
            <span id="weather">小雨转晴</span>
            <span id="temperature">32/23℃</span>
            <span id="windPower">东风</span>
        </div>
    </div>
    <!--主体-->
    <div class="main-box">
        <!--导航-->
        <div class="nav-box">
            <ul>
                <li>
                    <a href="index.html">
                        <div>
                            <img src="./assets/images/icon-index.png">
                            <img src="./assets/images/icon-index-active.png">
                        </div>
                        <p>大数据人流热力图</p>
                    </a>
                </li>
                <li class="active">
                    <a href="./chanye_jq.html">
                        <div>
                            <img src="./assets/images/icon-analysis.png">
                            <img src="./assets/images/icon-analysis-active.png">
                        </div>
                        <p>行业运行监测及统计</p>
                    </a>
                </li>
                <li>
                    <a href="./tongji.html">
                        <div>
                            <img src="./assets/images/icon-operation.png">
                            <img src="./assets/images/icon-operation-active.png">
                        </div>
                        <p>行业发展监测及统计</p>
                    </a>
                </li>
                <li>
                    <a href="./lvyoujia_qx.html">
                        <div>
                            <img src="./assets/images/icon-activity.png">
                            <img src="./assets/images/icon-activity-active.png">
                        </div>
                        <p>第三方数据处理和呈现</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--数据内容-->
        <div class="content-box flex-column">

            <div class="bg-1 flex1  mgb-16">
                <div class="content-title">
                    旅游产值分析
                </div>
                <div class="content-main bg-main-1 flex1" id="index-1">

                </div>
            </div>
            <div class="bg-1 flex1">
                <div class="content-title">
                    旅游消费报表
                    <button>导出</button>
                </div>
                <div class="bg-main-1" class="content-main ">
                    <table border="1">
                        <thead>
                        <tr>
                            <th>消费项目</th>
                            <th>1月</th>
                            <th>2月</th>
                            <th>3月</th>
                            <th>4月</th>
                            <th>5月</th>
                            <th>6月</th>
                            <th>7月</th>
                            <th>8月</th>
                            <th>9月</th>
                            <th>10月</th>
                            <th>11月</th>
                            <th>12月</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>景区</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                        </tr>
                        <tr>
                            <td>酒店</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                            <td>1245</td>
                            <td>1345</td>
                            <td>3450</td>
                            <td>1245</td>
                            <td>1345</td>
                            <td>3450</td>
                        </tr>
                        <tr>
                            <td>餐饮</td>
                            <td>2151</td>
                            <td>3405</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                            <td>1245</td>
                            <td>1345</td>
                            <td>3450</td>
                            <td>1245</td>
                        </tr>
                        <tr>
                            <td>娱乐</td>
                            <td>3211</td>
                            <td>5678</td>
                            <td>3405</td>
                            <td>2154</td>
                            <td>2567</td>
                            <td>2524</td>
                            <td>2154</td>
                            <td>4500</td>
                            <td>2567</td>
                            <td>1245</td>
                            <td>1345</td>
                            <td>2673</td>
                        </tr>
                        <tr>
                            <td>交通</td>
                            <td>2555</td>
                            <td>2454</td>
                            <td>3322</td>
                            <td>2524</td>
                            <td>1345</td>
                            <td>3450</td>
                            <td>4500</td>
                            <td>1245</td>
                            <td>4500</td>
                            <td>1245</td>
                            <td>1345</td>
                            <td>2673</td>
                        </tr>
                        <tr>
                            <td>旅行社</td>
                            <td>2185</td>
                            <td>3322</td>
                            <td>1345</td>
                            <td>3450</td>
                            <td>4500</td>
                            <td>1245</td>
                            <td>4500</td>
                            <td>1245</td>
                            <td>1345</td>
                            <td>2888</td>
                            <td>2524</td>
                            <td>1976</td>
                        </tr>
                        <tr>
                            <td>合计</td>
                            <td>27888</td>
                            <td>25776</td>
                            <td>37888</td>
                            <td>27888</td>
                            <td>25776</td>
                            <td>27888</td>
                            <td>25776</td>
                            <td>37888</td>
                            <td>35776</td>
                            <td>37888</td>
                            <td>35776</td>
                            <td>35776</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/ECharts/china.js"></script>
<script src="./assets/js/public.js"></script>
<script>
    function myChart1(data) {
        var myChart = echarts.init(document.getElementById('index-1'));
        let date = [],scenicArr=[],hotelArr=[],foodArr=[],entertainmentArr=[],trafficArr=[],agencyArr=[],allArr=[]
        data.map(item=>{
            date.push(item.date)
            scenicArr.push(item.scenicData)
            hotelArr.push(item.hotelData)
            foodArr.push(item.foodData)
            entertainmentArr.push(item.entertainmentData)
            trafficArr.push(item.trafficData)
            agencyArr.push(item.agencyData)
            allArr.push(item.scenicData + item.hotelData + item.foodData + item.entertainmentData + item.trafficData + item.agencyData)
        })
        option = {
            grid: {
                top: '20px',
                left: '20px',
                bottom: "35px",
                right: "16px"
            },
            legend: {
                show:true,
                right:'20',
                icon: 'stack',
                itemWidth:10,
                itemHeight:10,
                textStyle:{
                    color:'#fff'
                },
            },
            tooltip: {
                show: true,
                trigger:'axis'
            },
            xAxis: {
                type: 'category',
                data: date,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(46,166,255,.5)"
                    }
                }
            },
            yAxis: {
                type: 'value',
                // max: 100000,
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
            },
            series: [
                {
                    data: scenicArr,
                    type: 'line',
                    smooth: true,
                    symbol: "circle",
                    name: '景区',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                },
                {
                    data: hotelArr,
                    type: 'line',
                    smooth: true,
                    symbol: "circle",
                    name: '酒店',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                },
                {
                    data:foodArr,
                    type: 'line',
                    smooth: true,
                    symbol: "circle",
                    name: '餐饮',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                },
                {
                    data:entertainmentArr,
                    type: 'line',
                    smooth: true,
                    symbol: "circle",
                    name: '娱乐',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                },
                {
                    data: trafficArr,
                    type: 'line',
                    smooth: true,
                    symbol: "circle",
                    name: '交通',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                },
                {
                    data:agencyArr,
                    type: 'line',
                    smooth: true,
                    symbol: "circle",
                    name: '旅行社',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                },
                {
                    data: allArr,
                    type: 'line',
                    smooth: true,
                    symbol: "circle",
                    name: '合计',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                },
            ]
        };

        myChart.setOption(option);
    }
    let data = [
        {date:'2020-01',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-02',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-03',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-04',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-05',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-06',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-07',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-08',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-09',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-010',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-011',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
        {date:'2020-012',scenicData :1256,hotelData:2265,foodData:2454,entertainmentData:2151,trafficData:2356,agencyData:2654,},
    ]
    myChart1(data)
</script>

</html>
